import React, { useState } from "react";
import { Row, Button, Form, Select, DatePicker, Input, Table } from 'antd'
import './kantoku.sass'
import Columns from "./tableColumns"

const { RangePicker } = DatePicker

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};


const Kantoku = () => {

  const data = [];

  for (let i = 0; i < 100; i++) {
    data.push({
      key: i,
      index: i,
      shopName: `Edrward ${i}`,
      age: 32,
      address: `London Park no. ${i}`,
    });
  }

  const [size, setSize] = useState('middle');

  const [selectionType, setSelectionType] = useState('checkbox');

  return (
    <div className="ktk">
      <Row className="topBar">
        <div className="btnGroup">
          <Button>刷新</Button>
          <Button type="primary">新增</Button>
          <Button type="primary" danger>删除</Button>
          <Button>导出</Button>
        </div>
        <div className="searchGroup">
          <Form
            className="kan-form"
            layout="horizontal"
          // initialValues={{
          //   size: componentSize,
          // }}
          // onValuesChange={onFormLayoutChange}
          // size={componentSize}
          >
            <Form.Item label="检查结果">
              <Select>
                <Select.Option value="all">全部</Select.Option>
                <Select.Option value="qualified">合格</Select.Option>
                <Select.Option value="unqualified">不合格</Select.Option>
                <Select.Option value="rectified">已整改</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="检查日期">
              <RangePicker size={size} />
            </Form.Item>
            <Form.Item>
              <Input placeholder="请输入" className="kotei"/>
            </Form.Item>
            <div className="btnGroup">
              <Button type="primary">搜索</Button>
              <Button>重置</Button>
            </div>
          </Form>
        </div>
      </Row>
      <Row>
        <Table
          className="kan-table"
          rowSelection={{
            type: selectionType,
            ...rowSelection,
          }}
          columns={Columns}
          dataSource={data}
          scroll={{
            x: 1500,
            y: 420,
          }}
        />
      </Row>
    </div>
  )
}

export default Kantoku